<!-- src/components/TeachersManagement.vue -->
<template>
  <div class="teachers-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-actions">
        <div class="search-filter">
          <div class="search-box">
            <input v-model="searchForm.name" type="text" placeholder="搜索教师姓名" @input="debounceSearch"
              class="search-input" />
            <i class="icon-search"></i>
          </div>

          <input v-model="searchForm.teacher_id" type="text" placeholder="教工号" @input="debounceSearch"
            class="filter-input" />

          <!-- <input
            v-model="searchForm.specialty"
            type="text"
            placeholder="教学方向"
            @input="debounceSearch"
            class="filter-input"
          />
           -->
          <!-- <select v-model="searchForm.category" @change="handleSearch" class="filter-select">
            <option value="">全部分类</option>
            <option value="1">理论教学</option>
            <option value="2">实践教学</option>
            <option value="3">技能培训</option>
          </select> -->

          <select v-model="searchForm.category_id" @change="handleSearch" class="filter-select">
            <option value="">全部职称</option>
            <option value="129">客座讲师</option>
            <option value="128">初级讲师</option>
            <option value="127">中级讲师</option>
            <option value="126">高级讲师</option>
          </select>

          <button @click="resetFilters" class="btn btn-secondary">重置</button>
        </div>

        <button @click="showCreateModal = true" class="btn btn-primary">
          <i class="icon-plus"></i>新增教师
        </button>
      </div>
    </div>

    <!-- 教师统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon">
          <i class="icon-users"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.total || 0 }}</div>
          <div class="stat-label">总教师数</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon active">
          <i class="icon-user-check"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.active || 0 }}</div>
          <div class="stat-label">在职教师</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon sessions">
          <i class="icon-calendar"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.totalSessions || 0 }}</div>
          <div class="stat-label">总授课场次</div>
        </div>
      </div>
    </div>

    <!-- 教师表格 -->
    <div class="table-container">
      <div class="table-header">
        <h3>教师列表</h3>
        <div class="table-actions">
          <button @click="exportTeachers" class="btn btn-outline">
            <i class="icon-download"></i>导出
          </button>
        </div>
      </div>

      <div class="table-wrapper" v-loading="loading">
        <table class="data-table">
          <thead>
            <tr>
              <th>教工号</th>
              <th>姓名</th>
              <th>教学方向</th>
              <th>职称级别</th>
              <th>职称</th>
              <th>身份证号</th>
              <th>手机号</th>
              <th>授课场次</th>

              <th>创建时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="teacher in teachers" :key="teacher.id">
              <td>{{ teacher.teacher_id }}</td>
              <td>
                <div class="teacher-info">
                  <!-- <img :src="teacher.avatar || '/default-avatar.png'" alt="头像" class="avatar-small" /> -->
                  <span>{{ teacher.name }}</span>
                </div>
              </td>
              <td>{{ teacher.specialty }}</td>
              <td>
                <span class="category-tag" :class="`category-${teacher.category}`">
                  {{ teacher.category.name }}
                </span>
              </td>
              <td>
                <span class="level-badge" :class="teacher.level">
                  {{ teacher.level }}
                </span>
              </td>
              <td>

                {{ hideIdCard(teacher.id_card) }}

              </td>
              <td>{{ teacher.phone }}</td>
              <td>{{ teacher.sessions_count || 0 }}</td>

              <td>{{ formatDate(teacher.created_at) }}</td>
              <td>
                <div class="action-buttons">
                  <button @click="viewTeacher(teacher)" class="btn-icon" title="查看">
                    <i class="icon-eye"></i>
                  </button>
                  <button @click="editTeacher(teacher)" class="btn-icon" title="编辑">
                    <i class="icon-edit"></i>
                  </button>
                  <button @click="viewCourses(teacher)" class="btn-icon courses" title="查看课程">
                    <i class="icon-book"></i>
                  </button>
                  <!-- <button @click="incrementSessions(teacher.id)" class="btn-icon increment" title="增加场次">
                    <i class="icon-plus"></i>
                  </button> -->
                  <button @click="deleteTeacher(teacher)" class="btn-icon danger" title="删除">
                    <i class="icon-trash"></i>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <div class="pagination-info">
          共 {{ total }} 条记录，第 {{ currentPage }}/{{ totalPages }} 页
        </div>
        <div class="pagination">
          <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1" class="pagination-btn">
            上一页
          </button>
          <span class="pagination-pages">
            <button v-for="page in visiblePages" :key="page" @click="changePage(page)"
              :class="['pagination-btn', { active: page === currentPage }]">
              {{ page }}
            </button>
          </span>
          <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages" class="pagination-btn">
            下一页
          </button>
        </div>
      </div>
    </div>

   <!-- 创建/编辑教师模态框 -->
<div v-if="showCreateModal || showEditModal" class="modal-overlay" @click="closeModals">
  <div class="modal" @click.stop>
    <div class="modal-header">
      <h3>{{ showCreateModal ? '新增教师' : '编辑教师' }}</h3>
      <button @click="closeModals" class="modal-close">
        <i class="icon-x"></i>
      </button>
    </div>

    <div class="modal-body">
      <form @submit.prevent="saveTeacher">
        <div class="form-group">
          <label>教工号</label>
          <input v-model="teacherForm.teacher_id" type="text" required 
            :readonly="showEditModal" 
            :class="{'readonly-input': showEditModal}" 
            :placeholder="showEditModal ? '' : '系统自动生成'" />
        </div>

        <!-- 姓名 - 编辑时只读 -->
        <div class="form-group">
          <label>姓名</label>
          <input v-model="teacherForm.name" type="text" required 
            :readonly="showEditModal" 
            :class="{'readonly-input': showEditModal}" 
            placeholder="请输入姓名" />
        </div>

        <!-- 手机号 - 编辑时只读 -->
        <div class="form-group">
          <label>手机号</label>
          <input v-model="teacherForm.phone" type="tel" 
            :readonly="showEditModal" 
            :class="{'readonly-input': showEditModal}" 
            placeholder="请输入手机号" />
        </div>

        <!-- 身份证号 - 编辑时隐藏，新增时显示 -->
        <div class="form-group" v-if="showCreateModal">
          <label>身份证号</label>
          <input v-model="teacherForm.id_card" type="text" required 
            placeholder="请输入身份证号" />
        </div>

        <!-- 编辑时显示身份证号后4位（只读） -->
        <div class="form-group" v-else>
          <label>身份证号</label>
          <input :value="hideIdCard(teacherForm.id_card)" type="text" 
            readonly class="readonly-input" 
            placeholder="已隐藏" />
        </div>

        <!-- 入职时间 - 编辑时只读 -->
        <div class="form-group">
          <label>入职时间</label>
          <input v-model="teacherForm.hire_date" type="date" 
            :readonly="showEditModal" 
            :class="{'readonly-input': showEditModal}" 
            :max="today" 
            placeholder="请选择入职时间" />
        </div>

        <div class="form-group">
          <label>教学方向</label>
          <select v-model="teacherForm.specialty" required>
            <option value="">请选择教学方向</option>
            <option value="种植技术">种植技术</option>
            <option value="养殖技术">养殖技术</option>
            <option value="农产品加工">农产品加工</option>
            <option value="农业营销">农业营销</option>
            <option value="农场管理">农场管理</option>
            <option value="农村电商">农村电商</option>
            <option value="农业财务">	农业财务</option>
          </select>
        </div>

        <div class="form-group">
          <label>职称级别</label>
          <select v-model="teacherForm.category_id" required>
            <option value="">请选择职称级别</option>
            <option value="129">客座讲师</option>
            <option value="128">初级讲师</option>
            <option value="127">中级讲师</option>
            <option value="126">高级讲师</option>
          </select>
        </div>

        <div class="form-group">
          <label>职称</label>
          <input v-model="teacherForm.level" type="text" placeholder="请输入职称" />
        </div>

        <div class="form-group full-width">
          <label>教育经历</label>
          <textarea v-model="teacherForm.education" rows="2" placeholder="请输入教育经历"></textarea>
        </div>

        <div class="form-group full-width">
          <label>简介</label>
          <textarea v-model="teacherForm.notes" rows="4" placeholder="请输入教师简介"></textarea>
        </div>

        <div class="modal-footer">
          <button type="button" @click="closeModals" class="btn btn-secondary">取消</button>
          <button type="submit" class="btn btn-primary" :disabled="saving">
            {{ saving ? '保存中...' : '保存' }}
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

    

    <!-- 教师详情模态框 -->
    <div v-if="showDetailModal" class="modal-overlay" @click="showDetailModal = false">
      <div class="modal modal-large" @click.stop>
        <div class="modal-header">
          <h3>教师详情</h3>
          <button @click="showDetailModal = false" class="modal-close">
            <i class="icon-x"></i>
          </button>
        </div>

        <div class="modal-body">
          <div class="teacher-detail" v-if="selectedTeacher">
            <div class="detail-header">
              <!-- <img :src="selectedTeacher.avatar || '/default-avatar.png'" alt="头像" class="avatar-large" /> -->
              <div class="basic-info">
                <h4>{{ selectedTeacher.name }}</h4>
                <p>教工号：{{ selectedTeacher.teacher_id }}</p>
                <p>教学方向：{{ selectedTeacher.specialty }}</p>
                <span class="level-badge" :class="selectedTeacher.level">
                  {{ selectedTeacher.level }}
                </span>
              </div>
            </div>

            <div class="detail-content">
              <div class="detail-section">
                <h5>基本信息</h5>
                <div class="detail-grid">
                  <!-- <div class="detail-item">
                    <label>分类：</label>
                    <span>{{ getCategoryName(selectedTeacher.category.name) }}</span>
                  </div> -->
                  <div class="detail-item">
                    <label>手机号：</label>
                    <span>{{ selectedTeacher.phone || '-' }}</span>
                  </div>
                  <!-- <div class="detail-item">
                    <label>邮箱：</label>
                    <span>{{ selectedTeacher.email || '-' }}</span>
                  </div> -->
                  <div class="detail-item">
                    <label>授课场次：</label>
                    <span>{{ selectedTeacher.sessions_count || 0 }}</span>
                  </div>
                  <div class="detail-item">
                    <label>创建时间：</label>
                    <span>{{ formatDate(selectedTeacher.created_at) }}</span>
                  </div>

                </div>
              </div>

              <div class="detail-section">
                <h5>教师简介</h5>
                <div class="description-full">
                  {{ selectedTeacher.notes }}
                </div>
              </div>
              <div class="detail-section">
                <h5>教育经历</h5>
                <div class="description-full">
                  {{ selectedTeacher.education }}
                </div>
              </div>

              <div class="detail-section">
                <h5>授课统计</h5>
                <div class="stats-grid-small">
                  <div class="stat-item">
                    <div class="stat-number">{{ selectedTeacher.sessions_count || 0 }}</div>
                    <div class="stat-label">授课场次</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-number">{{ teacherCourses.length }}</div>
                    <div class="stat-label">负责课程</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 教师课程模态框 -->
    <div v-if="showCoursesModal" class="modal-overlay" @click="showCoursesModal = false">
      <div class="modal modal-large" @click.stop>
        <div class="modal-header">
          <h3>{{ selectedTeacher?.name }} 的课程</h3>
          <button @click="showCoursesModal = false" class="modal-close">
            <i class="icon-x"></i>
          </button>
        </div>

        <div class="modal-body">
          <div class="courses-list" v-loading="loadingCourses">
            <div v-if="teacherCourses.length === 0" class="empty-state">
              <i class="icon-book"></i>
              <p>该教师暂无课程</p>
            </div>
            <div v-else class="course-grid">
              <div v-for="course in teacherCourses" :key="course.id" class="course-card">
                <div class="course-header">
                  <h5>{{ course.title }}</h5>
                  <!-- <span class="course-category">{{ course.tages }}</span> -->
                </div>
                <div class="course-info">
                  <p class="course-description">{{ truncateText(course.notes, 60) }}</p>
                  <div class="course-meta">
                    <span><i class="icon-users"></i> {{ course.enrollment_count || 0 }} 人报名</span>
                    <!-- <span><i class="icon-clock"></i> {{ course.duration || 0 }} 小时</span> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { teacherAPI, courseAPI } from '@/services/api'

// 响应式数据
const loading = ref(false)
const saving = ref(false)
const loadingCourses = ref(false)
const teachers = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const lastTeacherId = ref('')

// 搜索表单
const searchForm = reactive({
  name: '',
  teacher_id: '',
  specialty: '',
  category: '',
  level: '',
  category_id: '',
})
// 获取当天日期（YYYY-MM-DD格式）
const today = computed(() => {
  const date = new Date()
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
})

// 模态框状态
const showCreateModal = ref(false)
const showEditModal = ref(false)
const showDetailModal = ref(false)
const showCoursesModal = ref(false)
const selectedTeacher = ref(null)

// 教师表单
const teacherForm = reactive({
   teacher_id: '',
  name: '',
  specialty: '',
  category_id: '',
  level: '',
  phone: '',
  id_card: '',
  hire_date: '',
  education: '',
  notes: '',
  
})

// 统计数据
const statistics = ref({
  total: 0,
  active: 0,
  totalSessions: 0
})

// 教师课程
const teacherCourses = ref([])

// 计算属性
const totalPages = computed(() => Math.ceil(total.value / pageSize.value))
const visiblePages = computed(() => {
  const pages = []
  const maxVisible = 5
  const start = Math.max(1, currentPage.value - Math.floor(maxVisible / 2))
  const end = Math.min(totalPages.value, start + maxVisible - 1)

  for (let i = start; i <= end; i++) {
    pages.push(i)
  }
  return pages
})

// 防抖搜索
let searchTimeout = null
const debounceSearch = () => {
  clearTimeout(searchTimeout)
  searchTimeout = setTimeout(() => {
    handleSearch()
  }, 500)
}

// 方法
const hideIdCard = (idCard) => {
  if (!idCard) return '-'
  // 匹配18位（允许最后一位是X）或15位身份证
  return idCard.replace(/(\d{4})\d{10}(\w{4})/, '$1**********$2')
    || idCard.replace(/(\d{4})\d{7}(\w{3}|\d{3})/, '$1*******$2')
}

const fetchTeachers = async () => {
  loading.value = true
  try {
    const params = {
      skip: (currentPage.value - 1) * pageSize.value,
      limit: pageSize.value,
      ...searchForm
    }

    // 清除空值
    Object.keys(params).forEach(key => {
      if (params[key] === '' || params[key] === null) {
        delete params[key]
      }
    })

    const response = await teacherAPI.getTeachers(params)
    teachers.value = response.items
    total.value = response.total
    // 记录最后一个学生的学号
    if (teachers.value.length > 0) {
      lastTeacherId.value = teachers.value[0].teacher_id; // 改为获取第一个学生的学号
    }

    // 更新统计
    updateStatistics()
  } catch (error) {
    console.error('获取学员列表失败:', error)
    // 这里可以添加错误提示
  } finally {
    loading.value = false
  }
}

const generateNextTeacherId = () => {


  // 提取数字部分并加1
  const numPart = lastTeacherId.value.match(/\d+/)?.[0] || '000000'
  const nextNum = parseInt(numPart) + 1
  // 格式化为6位数，前面补0
  const paddedNum = String(nextNum).padStart(4, '0')
  return `T${paddedNum}`
}

const updateStatistics = () => {
  statistics.value = {
    total: total.value,
    active: teachers.value.length,
    totalSessions: teachers.value.reduce((sum, teacher) => sum + (teacher.sessions_count || 0), 0)
  }
}

const handleSearch = () => {
  currentPage.value = 1
  fetchTeachers()
}

const resetFilters = () => {
  // 重置搜索表单的所有字段
  searchForm.name = ''
  searchForm.teacher_id = ''
  searchForm.specialty = ''
  searchForm.category = ''
  searchForm.level = ''
  searchForm.category_id = ''
  
  // 重置后重新获取数据
  handleSearch()
}

const changePage = (page) => {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page
    fetchTeachers()
  }
}

const viewTeacher = async (teacher) => {
  try {
    const response = await teacherAPI.getTeacher(teacher.id)
    selectedTeacher.value = response
    showDetailModal.value = true
  } catch (error) {
    console.error('获取教师详情失败:', error)
  }
}

const editTeacher = (teacher) => {
  Object.assign(teacherForm, {
    teacher_id: teacher.teacher_id,
    name: teacher.name,
    specialty: teacher.specialty || '', 
    category_id: teacher.category_id, // 修复：使用 category_id 而不是 category
    level: teacher.level,
    phone: teacher.phone,
    id_card: teacher.id_card, // 添加身份证号
    hire_date: teacher.hire_date, // 添加入职时间
    education: teacher.education, // 添加教育经历
    notes: teacher.notes // 添加简介
  })
  selectedTeacher.value = teacher
  showEditModal.value = true
}

const saveTeacher = async () => {
  saving.value = true
  try {
    if (showCreateModal.value) {
      await teacherAPI.createTeacher(teacherForm)
    } else {
      await teacherAPI.updateTeacher(selectedTeacher.value.id, teacherForm)
    }

    closeModals()
    fetchTeachers()
  } catch (error) {
    console.error('保存教师失败:', error)
  } finally {
    saving.value = false
  }
}

const deleteTeacher = async (teacher) => {
  if (confirm(`确定要删除教师 ${teacher.name} 吗？`)) {
    try {
      await teacherAPI.deleteTeacher(teacher.id)
      fetchTeachers()
    } catch (error) {
      console.error('删除教师失败:', error)
    }
  }
}

const viewCourses = async (teacher) => {
  selectedTeacher.value = teacher
  loadingCourses.value = true
  showCoursesModal.value = true

  try {
    // 修改API调用方式
    const response = await courseAPI.getCourses({ teacher_id: teacher.id })
    teacherCourses.value = response.items || response || []
  } catch (error) {
    console.error('获取教师课程失败:', error)
    teacherCourses.value = []
  } finally {
    loadingCourses.value = false
  }
}

const incrementSessions = async (teacherId) => {
  try {
    await teacherAPI.incrementSessions(teacherId)
    fetchTeachers()
  } catch (error) {
    console.error('增加授课场次失败:', error)
  }
}

const closeModals = () => {
  showCreateModal.value = false
  showEditModal.value = false
  selectedTeacher.value = null
  // 重置表单
  Object.assign(teacherForm, {
      teacher_id: '',
    name: '',
    specialty: '',
    category_id: '',
    level: '',
    phone: '',
    id_card: '',
    hire_date: '',
    education: '',
    notes: ''
  })
}

const exportTeachers = () => {
  console.log('导出教师数据')
}

const getCategoryName = (category) => {
  const categories = {
    1: '理论教学',
    2: '实践教学',
    3: '技能培训'
  }
  return categories[category] || '未知'
}

const truncateText = (text, maxLength) => {
  if (!text) return '-'
  if (text.length <= maxLength) return text
  return text.substring(0, maxLength) + '...'
}

const formatDate = (date) => {
  if (!date) return '-'
  return new Date(date).toLocaleDateString('zh-CN')
}

watch(showCreateModal, (newVal) => {
  if (newVal) {
    teacherForm.teacher_id = generateNextTeacherId()
  }
})


// 生命周期
onMounted(() => {
  fetchTeachers()
})
</script>

<style scoped>
/* 复用学员管理的基础样式，添加教师特有样式 */
.teachers-management {
  padding: 20px;
}

/* 继承之前的所有基础样式... */
/* 基础容器样式 */
.teachers-management,
.students-management {
  padding: 20px;
}

/* 页面头部 */
.page-header {
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.search-filter {
  display: flex;
  gap: 12px;
  align-items: center;
}

.search-box {
  position: relative;
}

.search-input {
  width: 300px;
  padding: 8px 36px 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.search-box .icon-search {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
}

.filter-select,
.filter-input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background: white;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #4F46E5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #1F2937;
}

.stat-label {
  color: #6B7280;
  font-size: 14px;
}

.table-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.table-header {
  padding: 20px;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-header h3 {
  margin: 0;
  color: #1F2937;
}

.table-wrapper {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #E5E7EB;
}

.data-table th {
  background: #F9FAFB;
  font-weight: 600;
  color: #374151;
}

头像和信息样式 Css Apply .teacher-info,
.student-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar-small {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

操作按钮 Css Apply .action-buttons {
  display: flex;
  gap: 4px;
}

.btn-icon {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 4px;
  background: #F3F4F6;
  color: #6B7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-icon:hover {
  background: #E5E7EB;
  color: #374151;
}

.btn-icon.danger {
  background: #FEE2E2;
  color: #DC2626;
}

.btn-icon.danger:hover {
  background: #FECACA;
}

分页 Css Apply .pagination-wrapper {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #E5E7EB;
}

.pagination {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pagination-btn {
  padding: 8px 12px;
  border: 1px solid #D1D5DB;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled) {
  background: #F3F4F6;
}

.pagination-btn.active {
  background: #4F46E5;
  color: white;
  border-color: #4F46E5;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-large {
  max-width: 800px;
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  color: #1F2937;
}

.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #6B7280;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid #E5E7EB;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  font-weight: 500;
  color: #374151;
  font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 8px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 14px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #4F46E5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-primary {
  background: #4F46E5;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #4338CA;
}

.btn-secondary {
  background: #F3F4F6;
  color: #374151;
  border: 1px solid #D1D5DB;
}

.btn-secondary:hover {
  background: #E5E7EB;
}

.btn-outline {
  background: white;
  color: #4F46E5;
  border: 1px solid #4F46E5;
}

.btn-outline:hover {
  background: #4F46E5;
  color: white;
}

.detail-header {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E5E7EB;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section h5 {
  margin: 0 0 16px 0;
  color: #1F2937;
  font-size: 16px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.detail-item {
  display: flex;
  gap: 8px;
}

.detail-item label {
  font-weight: 500;
  color: #6B7280;
  min-width: 80px;
}



.category-tag {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.category-tag.category-1 {
  background: #DBEAFE;
  color: #1E40AF;
}

.category-tag.category-2 {
  background: #D1FAE5;
  color: #065F46;
}

.category-tag.category-3 {
  background: #FEF3C7;
  color: #92400E;
}

.level-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background: #F3F4F6;
  color: #374151;
}

.level-badge.初级 {
  background: #DBEAFE;
  color: #1E40AF;
}

.level-badge.中级 {
  background: #FEF3C7;
  color: #92400E;
}

.level-badge.高级 {
  background: #FEE2E2;
  color: #DC2626;
}

.btn-icon.courses {
  background: #E0E7FF;
  color: #3730A3;
}

.btn-icon.courses:hover {
  background: #C7D2FE;
}

.btn-icon.increment {
  background: #D1FAE5;
  color: #065F46;
}

.btn-icon.increment:hover {
  background: #A7F3D0;
}

.stat-icon.sessions {
  background: #F59E0B;
}

.teacher-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.description {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.description-full {
  line-height: 1.6;
  color: #374151;
  padding: 12px;
  background: #F9FAFB;
  border-radius: 6px;
}

.filter-input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  width: 150px;
}

.form-group textarea {
  padding: 8px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 14px;
  resize: vertical;
  font-family: inherit;
}

.courses-list {
  min-height: 300px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #6B7280;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.course-card {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 16px;
  transition: all 0.2s;
}

.course-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.course-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.course-header h5 {
  margin: 0;
  color: #1F2937;
  font-size: 16px;
}

.course-category {
  padding: 2px 8px;
  background: #F3F4F6;
  color: #6B7280;
  border-radius: 12px;
  font-size: 12px;
}

.course-description {
  color: #6B7280;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.course-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #9CA3AF;
}

.course-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.readonly-input {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

/* 继承其他样式... */

@media (max-width: 768px) {
  .header-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .search-filter {
    flex-wrap: wrap;
  }

  .search-input {
    width: 100%;
  }

  .stats-cards {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .detail-header {
    flex-direction: column;
    text-align: center;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }
}
</style>